<div class="container">
  <div class="adf-demo-site-container-style" id="demo-container">
    <adf-sites-dropdown (change)="getSiteContent($event)">
    </adf-sites-dropdown>
  </div>
  <alfresco-upload-drag-area
    [parentId]="documentList.currentFolderId"
    [versioning]="versioning"
    [enabled]="documentList.hasCreatePermission()">
    <div *ngIf="errorMessage" class="error-message">
      <button (click)="resetError()" class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">highlight_off</i>
      </button>
      <span class="error-message--text">{{errorMessage}}</span>
    </div>
    <ng-container *ngIf="useCustomToolbar">
      <adf-toolbar [color]="toolbarColor">
        <adf-toolbar-title>
          <adf-breadcrumb *ngIf="!useDropdownBreadcrumb"
                          class="files-breadcrumb"
                          [target]="documentList"
                          [folderNode]="documentList.folderNode">
          </adf-breadcrumb>
          <adf-dropdown-breadcrumb  *ngIf="useDropdownBreadcrumb"
                                    class="files-breadcrumb"
                                    [target]="documentList"
                                    [folderNode]="documentList.folderNode">
          </adf-dropdown-breadcrumb>
        </adf-toolbar-title>
        <button md-icon-button (click)="onCreateFolderClicked($event)">
          <md-icon>create_new_folder</md-icon>
        </button>
        <button md-icon-button>
          <md-icon>delete</md-icon>
        </button>

        <button md-icon-button [mdMenuTriggerFor]="themePicker">
          <md-icon>format_color_fill</md-icon>
        </button>

        <md-menu #themePicker="mdMenu">
          <button md-menu-item (click)="toolbarColor = 'default'">Default</button>
          <button md-menu-item (click)="toolbarColor = 'primary'">Primary</button>
          <button md-menu-item (click)="toolbarColor = 'accent'">Accent</button>
          <button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
        </md-menu>

        <button md-icon-button [mdMenuTriggerFor]="menu">
          <md-icon>more_vert</md-icon>
        </button>
        <md-menu #menu="mdMenu">
          <button md-menu-item>
            <md-icon>dialpad</md-icon>
            <span>Redial</span>
          </button>
          <button md-menu-item disabled>
            <md-icon>voicemail</md-icon>
            <span>Check voicemail</span>
          </button>
          <button md-menu-item>
            <md-icon>notifications_off</md-icon>
            <span>Disable alerts</span>
          </button>
        </md-menu>
      </adf-toolbar>
    </ng-container>
    <adf-document-list
      #documentList
      [permissionsStyle]="permissionsStyle"
      [currentFolderId]="currentFolderId"
      [contextMenuActions]="true"
      [contentActions]="true"
      [allowDropFiles]="true"
      [selectionMode]="selectionMode"
      [multiselect]="multiselect"
      (error)="onNavigationError($event)"
      (success)="resetError()"
      (preview)="showFile($event)"
      (permissionError)="handlePermissionError($event)">
      <data-columns>
        <data-column
          key="$thumbnail"
          type="image"
          [sortable]="false"
          class="image-table-cell">
        </data-column>
        <data-column
          title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
          key="name"
          class="full-width ellipsis-cell">
        </data-column>
        <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
        <!--
        <data-column
            title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
            key="id"
            class="full-width ellipsis-cell">
            <template let-entry="$implicit">
                <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
            </template>
        </data-column>
        -->
        <data-column
          title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
          key="createdByUser.displayName"
          class="desktop-only">
        </data-column>
        <data-column
          title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
          key="createdAt"
          type="date"
          format="medium"
          class="desktop-only">
        </data-column>
      </data-columns>

      <content-actions>
        <!-- folder actions -->
        <content-action
          icon="content_copy"
          target="folder"
          title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.COPY' | translate}}"
          permission="update"
          [disableWithNoPermission]="true"
          handler="copy">
        </content-action>
        <content-action
          icon="redo"
          target="folder"
          title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.MOVE' | translate}}"
          permission="update"
          [disableWithNoPermission]="true"
          handler="move">
        </content-action>
        <content-action
          icon="delete"
          target="folder"
          permission="delete"
          [disableWithNoPermission]="true"
          title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
          (permissionEvent)="handlePermissionError($event)"
          handler="delete">
        </content-action>
        <!-- document actions -->
        <content-action
          icon="file_download"
          target="document"
          title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
          handler="download">
        </content-action>
        <content-action
          icon="content_copy"
          target="document"
          title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.COPY' | translate}}"
          permission="update"
          [disableWithNoPermission]="true"
          handler="copy">
        </content-action>
        <content-action
          icon="redo"
          target="document"
          title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.MOVE' | translate}}"
          permission="update"
          [disableWithNoPermission]="true"
          handler="move">
        </content-action>
        <content-action
          icon="delete"
          target="document"
          permission="delete"
          [disableWithNoPermission]="true"
          (permissionEvent)="handlePermissionError($event)"
          title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
          handler="delete">
        </content-action>
      </content-actions>
    </adf-document-list>
  </alfresco-upload-drag-area>
</div>

<context-menu-holder></context-menu-holder>

<p>Current folder ID: {{ documentList.currentFolderId }}</p>

<div class="p-10">
  Selected Nodes:
  <ul>
    <li *ngFor="let node of documentList.selection">
      {{ node.entry.name }}
    </li>
  </ul>
</div>

<div class="container">
  <section>
    <md-slide-toggle [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
  </section>

  <section>
    <md-slide-toggle [(ngModel)]="useDropdownBreadcrumb">Dropdown breadcrumb</md-slide-toggle>
  </section>

  <section>
    <md-slide-toggle [(ngModel)]="useCustomToolbar">Use custom toolbar</md-slide-toggle>
  </section>

  <section>
    <md-slide-toggle [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
  </section>

  <section>
    <md-slide-toggle [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
  </section>

  <section>
    <md-slide-toggle [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
  </section>

  <section>
    <md-slide-toggle [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
  </section>

  <section>
    <md-slide-toggle [(ngModel)]="disableWithNoPermission">Disable upload button when user has no permissions</md-slide-toggle>
  </section>

  <h5>Upload</h5>
  <section *ngIf="acceptedFilesTypeShow">
    <md-input-container>
      <input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
    </md-input-container>
  </section>
  <div *ngIf="!acceptedFilesTypeShow">
    <alfresco-upload-button
      #uploadButton
      [disabled]="!enableUpload"
      data-automation-id="multiple-file-upload"
      [rootFolderId]="documentList.currentFolderId"
      [multipleFiles]="multipleFileUpload"
      [uploadFolders]="folderUpload"
      [versioning]="versioning"
      [disableWithNoPermission]="disableWithNoPermission"
      (permissionEvent)="handlePermissionError($event)">
    </alfresco-upload-button>
  </div>
  <div *ngIf="acceptedFilesTypeShow">
    <alfresco-upload-button
      #uploadButton
      [disabled]="!enableUpload"
      data-automation-id="multiple-file-upload"
      [rootFolderId]="documentList.currentFolderId"
      [acceptedFilesType]="acceptedFilesType"
      [multipleFiles]="multipleFileUpload"
      [uploadFolders]="folderUpload"
      [versioning]="versioning"
      [disableWithNoPermission]="disableWithNoPermission"
      (permissionEvent)="handlePermissionError($event)">
    </alfresco-upload-button>
  </div>
  <section>
    <md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state)</md-checkbox>
  </section>
</div>

<div class="p-10">
  <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
  <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
    <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
      {{mode.viewValue}}
    </md-option>
  </md-select>
</div>

<file-uploading-dialog #fileDialog></file-uploading-dialog>

<div *ngIf="fileShowed">
  <alfresco-viewer [(showViewer)]="fileShowed"
                   [fileNodeId]="fileNodeId"
                   [overlayMode]="true">

    <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
      <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
        <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
      </ng-template>
    </extension-viewer>

  </alfresco-viewer>

  <!-- Comment the viewer above and uncomment that one below if you want test the overlay false viewer-->

  <!--<div *ngIf="fileShowed" class="adf-not-overlay-viewer">-->
  <!--<alfresco-viewer [(showViewer)]="fileShowed"-->
  <!--[fileNodeId]="fileNodeId"-->
  <!--[overlayMode]="false">-->
  <!--</alfresco-viewer>-->
  <!--</div>-->

</div>
